Code splitting is a technique used to improve performance by breaking your application into smaller chunks. In SvelteKit, this happens automatically at the route level, ensuring that only the JavaScript needed for the current page is loaded.
Route-Based Code Splitting: Each
+page.sveltefile is compiled into its own bundle.Lazy Loading: Code for other routes is only loaded when the user navigates to them.
Dynamic Imports: You can manually load components or modules when needed using
import().
This approach loads HeavyComponent.svelte only when the user requests it, reducing the initial bundle size.
Keep pages lightweight; split large features into separate routes.
Use dynamic
import()for heavy, rarely used components.Avoid bundling secrets or private data in client-side chunks.
Combine with caching strategies like service workers for even better performance.